Wavy Slider/ir.mahozad.multiplatform.wavyslider.material3/WavySlider

WavySlider

@Composable
fun WavySlider(value: Float, onValueChange: (Float) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, onValueChangeFinished: () -> Unit? = null, colors: WavySliderColors = WavySliderDefaults.colors(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, waveLength: Dp = defaultWaveSize, waveHeight: Dp = defaultWaveSize, waveThickness: Dp = defaultTrackThickness, trackThickness: Dp? = defaultTrackThickness, animationDirection: WaveAnimationDirection = WaveAnimationDirection.UNSPECIFIED, shouldFlatten: Boolean = false)

See the other overloaded Composable for documentations.

@Composable
fun WavySlider(value: Float, onValueChange: (Float) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, onValueChangeFinished: () -> Unit? = null, colors: WavySliderColors = WavySliderDefaults.colors(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, waveLength: Dp = defaultWaveSize, waveHeight: Dp = defaultWaveSize, waveThickness: Dp = defaultTrackThickness, trackThickness: Dp? = defaultTrackThickness, animationDirection: WaveAnimationDirection = WaveAnimationDirection.UNSPECIFIED, shouldFlatten: Boolean = false, thumb: @Composable (SliderPositions) -> Unit = { WavySliderDefaults.Thumb( interactionSource = interactionSource, colors = colors, enabled = enabled ) }, track: @Composable (SliderPositions) -> Unit = { sliderPositions -> WavySliderDefaults.Track( colors = colors, enabled = enabled, sliderPositions = sliderPositions, ///////////////// ///////////////// ///////////////// waveLength = waveLength, waveHeight = waveHeight, waveThickness = waveThickness, trackThickness = trackThickness, animationDirection = animationDirection, shouldFlatten = shouldFlatten ) })

A wavy slider much like the Material Design 3 slider.

By setting waveHeight to 0.dp it becomes just a regular Material Slider.

This component can also be used as a progress bar.

Note that range sliders do not make sense for the wavy slider. So, there is no RangeWavySlider counterpart.

Parameters

value

current value of the WavySlider. it will be coerced to the range 0f..1f.

onValueChange

onValueChange callback in which value should be updated

modifier

the Modifier to be applied to this WavySlider

enabled

controls the enabled state of this WavySlider. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

onValueChangeFinished

called when value change has ended. This should not be used to update the slider value (use onValueChange instead), but rather to know when the user has completed selecting a new value by ending a drag or a click.

colors

WavySliderColors that will be used to resolve the colors used for this WavySlider in different states. See WavySliderDefaults.colors.

interactionSource

the MutableInteractionSource representing the stream of Interactions for this WavySlider. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this WavySlider in different states.

waveLength

the distance over which the wave's shape repeats (must be 0.dp)

waveHeight

the total height of the wave (from crest to trough) (in other words, amplitude * 2)

waveThickness

the thickness of the active line (whether animated or not)

trackThickness

the thickness of the inactive line

animationDirection

the direction of wave movement which is, by default, from right to left for LTR layouts and from left to right for RTL layouts. Setting to WaveAnimationDirection.UNSPECIFIED also does the same thing

shouldFlatten

whether to decrease the wave height the farther it is from the thumb

thumb

the thumb to be displayed on the WavySlider, it is placed on top of the track. The lambda receives a SliderPositions which is used to obtain the current active track.

track

the track to be displayed on the WavySlider, it is placed underneath the thumb. The lambda receives a SliderPositions which is used to obtain the current active track.